<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    .wrapper{
        width: 300px;
        height: 300px;
        background-color: #990000;
    }
    .content{
        width: 200px;
        height: 200px;
        background-color: #3399cc;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: #008800;
    }
</style>

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>
<script>
    // 先补货再冒泡，但是，注意一点的是， 捕获和冒泡，只在点击的dom和dom的父亲之间，
    // 未点击的孩子，肯定不会参入其中，不然，如果页面的DOM结构很深，那都得过一遍，不就消耗性能了
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document .getElementsByClassName('box')[0];
    wrapper.addEventListener( 'click', function (e) {
        console.log('a 捕获');
        // alert('请登录！')
        // e.stopPropagation()
    }, true);
    content.addEventListener( 'click', function (){
        console.log('b 捕获');
    }, true);
    box.addEventListener('click',function () {
        console.log('c 捕获');
    }, true)
    wrapper.addEventListener( 'click', function () {
        console.log('a 冒泡');
    }, false);
    content.addEventListener( 'click', function (){
        console.log('b 冒泡');
    }, false);
    box.addEventListener('click',function () {
        console.log('c 冒泡');
    }, false)

</script>
</body>
</html>
